<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-card elevation="2">
          <v-card-title class="primary white--text">
            样式测试页面
          </v-card-title>
          <v-card-text>
            <v-row>
              <v-col cols="6">
                <v-text-field
                  label="搜索框测试"
                  outlined
                  dense
                  append-icon="mdi-magnify"
                ></v-text-field>
              </v-col>
              <v-col cols="6">
                <v-chip-group mandatory>
                  <v-chip outlined>全部</v-chip>
                  <v-chip outlined>待处理</v-chip>
                  <v-chip outlined>已完成</v-chip>
                </v-chip-group>
              </v-col>
            </v-row>
            
            <v-data-table
              :headers="testHeaders"
              :items="testItems"
              class="elevation-1"
            >
              <template v-slot:item.status="{ item }">
                <v-chip
                  small
                  :color="item.status === '已完成' ? 'success' : 'warning'"
                >
                  {{ item.status }}
                </v-chip>
              </template>
              <template v-slot:item.actions="{ item }">
                <v-btn small outlined color="primary">
                  <v-icon left small>mdi-eye</v-icon>
                  查看
                </v-btn>
              </template>
            </v-data-table>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'StyleTest',
  data() {
    return {
      testHeaders: [
        { text: '编号', value: 'id' },
        { text: '名称', value: 'name' },
        { text: '状态', value: 'status' },
        { text: '操作', value: 'actions', sortable: false }
      ],
      testItems: [
        { id: 1, name: '测试项目1', status: '已完成' },
        { id: 2, name: '测试项目2', status: '待处理' },
        { id: 3, name: '测试项目3', status: '已完成' }
      ]
    };
  }
};
</script>

<style scoped>
/* 测试样式 */
</style>